<template>
  <el-dialog title="新增候选人-批量导入" :visible="visible" @close="handleClose" width="850px" append-to-body>
    <div class="p-20 clearfix">
      <div class="upload-left">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="200"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <ui-button size="small" type="green" icon="icon icon-upload">上传简历附件</ui-button>
          <span slot="tip" class="upload-tip1">共上传了11个文件，<span>1</span>个文件上传失败。</span>
          <div slot="tip" class="upload-tip2">提示：支持word、excel、jpeg、pdf、压缩包等各种形式文件组合上传支持完整简历+种子简历上传</div>
        </el-upload>
        <el-form label-width="98px" label-position="left" class="mt-20">
          <el-form-item label="简历权限" required>
            <el-select v-model="form.power" style="width:100%">
              <el-option value="1" label="仅自己可见"></el-option>
              <el-option value="2" label="可见"></el-option>
            </el-select>
          </el-form-item>
          <div class="form-title mb-20">上传的简历直接关联：</div>
          <el-form-item label="项目">
            <el-select v-model="form.project" placeholder="选择关联项目" style="width:100%">
              <el-option value="1" label="项目1"></el-option>
              <el-option value="2" label="项目2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位">
            <el-select v-model="form.post" placeholder="选择关联的岗位" style="width:100%">
              <el-option value="1" label="岗位1"></el-option>
              <el-option value="2" label="岗位2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="form-bottom t-left mt-30">
          <ui-button size="medium" @click="lastStep">上一步</ui-button>
          <ui-button size="medium" @click="handleClose">取消</ui-button>
          <ui-button size="medium" type="blue">提交</ui-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {Dialog, Upload, Form, FormItem, Select, Option} from 'element-ui'
  export default {
    components: {
      [Dialog.name]: Dialog,
      [Upload.name]: Upload,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Select.name]: Select,
      [Option.name]: Option
    },
    props: ['visible'],
    data () {
      return {
        fileList: [
          {
            name: 'food.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          }, 
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          {
            name: 'food2.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          }
        ],
        form: {

        }
      }
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
      },
      //移除文件
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      //查看文件 ？？
      handlePreview(file) {
        console.log(file);
      },
      //超出文件提示
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 200 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      //溢出文件
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      //上一步
      lastStep(){
        this.$emit('lastStep', true)
      }
    }
  }
</script>

<style lang="scss">
  .upload-left{
    width: 440px;
    float: left;
    min-height: 410px;
  }
  .upload-right{
    flex:1
  }
  .upload-tip1{
    margin-left: 20px;
    color: #acacac;
    font-size: 14px;
    line-height: 24px;
    span{
      color: #ff6161;
    }
  }
  .upload-tip2{
    margin-top: 15px;
    color: #acacac;
    font-size: 14px;
    line-height: 24px;
  }
  .el-upload-list{
    width: 320px;
    box-sizing: border-box;
    position: absolute;
    right: 20px;
    top: 55px;
    padding: 5px 15px;
    background: #f5f9fe;
    border-radius: 4px;
    max-height: 410px;
    overflow-y: auto;
  }
</style>
